/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Dimensions} from 'react-native';
import {View, Picker, Colors} from 'react-native-ui-lib';
import AntdIcons from 'react-native-vector-icons/AntDesign';
import Octicons from 'react-native-vector-icons/Octicons';

function Select(props) {
  let {value, onChange, options, title = '', mode, icon, width} = props;
  const extratopBarProps = mode === 'multiple' ? {doneLabel: '保存'} : {};

  const extrawidth = width ? {width: width} : {};

  return (
    options && (
      <View
        {...extrawidth}
        left
        row
        centerV
        height={54}
        style={{
          backgroundColor: Colors.cardbackgroundColor,
          borderRadius: 12,
          padding: 12,
        }}>
        {icon ? icon : <Octicons name="project" size={16} />}
        <View height={24} flex-1 marginL-10 style={{marginTop: -4}}>
          <Picker
            key={value}
            placeholder={'选择' + title}
            value={value}
            enableModalBlur={false}
            onChange={onChange}
            topBarProps={{title, ...extratopBarProps}}
            // style={{color: Colors.red20}}
            showSearch
            searchPlaceholder={'选择' + title}
            mode={
              mode === 'multiple' ? Picker.modes.MULTI : Picker.modes.SINGLE
            }
            searchStyle={{
              color: Colors.blue30,
              placeholderTextColor: Colors.grey50,
            }}
            // onSearchChange={value => console.warn('value', value)}
          >
            {options?.map?.(option => (
              <Picker.Item
                key={option.value ?? option.id}
                value={option.value ?? option.id}
                label={option.label ?? option.projectName}
              />
            ))}
          </Picker>
        </View>
        {value && (
          <AntdIcons
            name="closecircle"
            size={16}
            style={{
              color: Colors.subheadingColor,
              marginLeft: 6,
              justifyContent: 'center',
            }}
            onPress={() => {
              onChange(null);
            }}
          />
        )}
      </View>
    )
  );
}

export default Select;
